<template>
<div class="login-page">
  <div class="subject">
    <!-- 左边部分 -->
    <div class="subject-left">
      <div class="subject-left-title">
        <h4>eAssist Careers</h4>
        <h1>HIRING PORTAL</h1>
        <router-link :to="{path:'/apply'}" class="titl-butt" style="z-index: 100">APPLY NOW</router-link>
      </div>
      <div class="aa-a">
      </div>
      <div class="subject-left-a">
        <div class="a-img">
          <img src="../assets/subject.png">
        </div>
        <div class="a-content">
          <p class="b-typeface-1">
                          Thank you for your interest in eAssist — the nation's leader in dental billing, accounting, 
                          and management support services. We look forward to getting to know you better.
          </p>
          <p class="b-typeface-2">
            OUR INITIAL INTERVIEW PROCESS<br>
            CONSISTS OF THE FOLLOWING SEVEN<br>
            ON-LINE APPLICATION/SKILLS<br>
            ASSESSMENT STEPS:
          </p>
        </div>
      </div>
      <div class="yellow-a">
      </div>
    </div>
    <!-- 右边部分 -->
    <div class="subject-right">
      <div class="right-1">
        <a href="#"><img class="logo" src="../assets/logo.png"></a>
        <div class="right-1-aa">
          <h3>...or Log on to Account*</h3>
          <div class="errorMsg">{{errorMsg}}</div>
          <div class="login-a">
            <p>Registered Email</p>
            <input 
              v-model="form.email"
              type="email" name="email" class="login-input" 
              placeholder="Please enter email address" 
              autofocus @input="inputEmail($event)"/>
            <div class="text-error" v-if="errorEmail">{{ errorEmail }}</div>
            <p class="Password">Password</p>
            <span><img src="../assets/locn_1.png" class="locn_1"></span>
            <input 
              v-model="form.password"
              type="password" name="password" class="login-input" 
              placeholder="Please input a password" @keyup.enter="onLogin"/>
            <div class="text-error" v-if="errorPassword">{{ errorPassword }}</div>
            <span><img src="../assets/locn_2.png" class="locn_2"></span>
            
            <div class="forget">Forgot your password? <a href="" @click.prevent="resetEmailDialogVisible=true">Reset</a></div>
          </div>
          <div class="introduce">
            <p>
            eAssist is an equal opportunity employer
            and affords equal opportunity to all 
            applicants for all positions without regard to 
            race, color, religion, gender, national origin, 
            age, disability, veteran status or any other
              status protected under local, state or federal laws.
            </p>
            <el-button type="primary" class="a" :loading="loading" @click="onLogin">
              Log On
            </el-button>
          </div>
        </div>
      </div>
      <p class="bottomText">eAssist © 2020. All rights reserved.</p>
    </div>
    <!-- 中间部分 -->
    <div class="yellow">
      <div class="horn-a"><img src="../assets/horn-1.png"></div>
      <ul>
        <li>
        <a >
        <div class="shadow-a">
          <p>
            <span>1</span>
            <img src="../assets/icon_a.png">
          </p>
        </div>
        <p class="describe">
                            Create a profile and
          <br/>
                          choose one or more
          <br/>
                          positions to apply for
          <br/>
          <i>approx 30 mins</i>
        </p>
        </a>
        </li>
        <li>
        <a >
        <div class="shadow-a">
          <p>
            <span>2</span>
            <img src="../assets/icon_b.png">
          </p>
        </div>
        <p class="describe">
                          Complete the skills and
          <br/>
                          personality assessments
          <br/>
                           for the given position
          <br/>
          <i>60-120 mins</i>
        </p>
        </a>
        </li>
        <li>
        <a >
        <div class="shadow-a">
          <p>
            <span>3</span>
            <img src="../assets/icon_c.png">
          </p>
        </div>
        <p class="describe">
                          Initiate the interview process by
          <br/>
                          interacting with a few members
          <br/>
                            from our talented team
          <br/>
          <i>approx 30 mins</i>
        </p>
        </a>
        </li>
        <li>
        <a >
        <div class="shadow-a">
          <p>
            <span>4</span>
            <img src="../assets/icon_d.png">
          </p>
        </div>
        <p class="describe">
                          Lay the groundwork
          <br/>
                            for onboarding
          <br/>
                            (several modules)
          <br/>
          <i>approx 20 mins</i>
        </p>
        </a>
        </li>
        <li>
          <a >
            <div class="shadow-a">
              <p>
                <span>5</span>
                <img src="../assets/icon_e.png">
              </p>
            </div>
            <p class="describe">
              Reach the finish line
              <br/>
              and meet your new
              <br/>
              eAssist team members
            </p>
          </a>
        </li>
      </ul>
        <div class="horn-b"><img src="../assets/horn-1.png"></div>
    </div>
  </div>
  <div class="bottomText-b"><i>*These login credentials may be used to return to this portal at a later time to complete the rest of the skill assessment tests.</i></div>
  <el-dialog title="Password Reset Request" @close="closeDialog" :visible.sync="resetEmailDialogVisible" width="40%" >
    <el-form label-width="60px" :rules="rules" ref="emailForm" :model="resetForm">
      <el-form-item label="Email" prop="Email">
        <el-input v-model="resetForm.Email" style="margin-right: 20px"></el-input>
      </el-form-item>
    </el-form>
    <div style="width: 100%;text-align: left;">
      <el-button type="primary" @click="onResetEmail">Submit</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
export default {
   data () {
      return {
        resetEmailDialogVisible:false,
        resetError:'',
        form: {
          email: '',
          password: ''
        },
        loading: false,
        resetForm:{
          Email:'',
        },
        errorEmail: '',
        errorPassword: '',
        errorMsg:'',
        reg:/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
      }
   },
  computed:{
    /**自定义发送邮箱的规则**/
     rules(){
       var checkEmail = (rule, value, callback) => {
         console.log('进行检测')
         if(value==""){
           callback("Email is required")
         } else if (!this.reg.test(value)) {
           callback("The Email is invalid")
         } else {
           callback()
         }
       };
       return {
         Email:[{ required: true, trigger: "blur" }, { validator: checkEmail, trigger: "blur" },]
       }
     }
  },
   methods: {
     /**提交重置按钮请求**/
     onResetEmail(){
       this.$refs["emailForm"].validate(valid => {
         if (valid) {
           this.resetEmailDialogVisible=false
           console.log("发送重置");
           this.$axios.post(this.$URL.passwordResetUrl,{email:this.resetForm.Email}).then((res)=>{
             if(res&&res.code==0){
               this.$message.success(res.msg)
             }else{
               this.$message.error(res.msg)
             }
           }).catch(err=>{
             this.$message.error(err)
           })
         }
       });
     },
     closeDialog(){
       this.resetEmailDialogVisible=false
       this.resetForm.Email=''
     },
     /**当输入邮箱字符动态监测输入邮箱是否正确**/
     inputEmail(event){
       var content = event.target.value
       if(!this.reg.test(content))this.errorEmail = 'The Email is invalid'
       else this.errorEmail = ''
     },
     onLogin () {
       if (this.reg.test(this.form.email)) {
          this.errorEmail = ''
         if (this.form.password) {
           this.errorPassword = ''
           this.loading = true
            this.$axios.post(this.$URL.loginUrl, {
              email: this.form.email,
              password: this.form.password
            }).then((res) => {
              this.loading=false
              if(res && res.code == 0){
                // 此处应使用sotre保存 this.$store.commit('login', token)
                this.errorMsg=''//登陆成功把页面上错误信息清除
                 localStorage.setItem('token', res.data.token)
                 localStorage.setItem('email',res.data.email)
                // this.$store.commit('userInfo',res.data)
                 this.$router.push('/service')
              }else{
                //如果不成功则返回错误信息
                this.errorMsg=res.msg
              }
            }).catch((err) => {
              this.loading=false
              this.$message.error({message:err.message})
            })
         } else {
            if(this.form.password==''){ this.errorPassword = 'The Password field is required'}
         }
       } else {
         if(this.form.email=='') this.errorEmail = 'The Registered Email field is required\n'
         else this.errorEmail = 'The Email is invalid'
       }
     }
   }
}
</script>
 
<style lang="less">
</style>
